import React, { useEffect, useRef, useState } from "react";
import CarouselCom from "../../components/Carousel";
import HotList from "../../components/HotList";
import Footer from "../../components/Footer";
import Food from "../../components/Food";
import ArticleCard from "../../components/ArticleCard";
import Chart from "../../components/Chart";
import { Menu} from "antd";
import './index.scss'
import { getHot, getRecommend, getAriticle } from "../../api";
const HomePage: React.FC = () => {
  const [state , setState] = useState<string>('1')
  const items = [
    {
      key: '1',
      label : '今日菜谱'
    },
    {
      key: '2',
      label : '经典菜'
    }
  ]
  const classicList = ['家常菜','快手菜','下饭菜','素食主义','烘焙','川菜','豫菜' ,'粤菜','早餐','肉类','海鲜','蔬菜','水果','豆制品','菌菇','米面','调味品','汤类']
  interface hotType {
    id:string,
    url:string,
    text:string
  }
  interface articleList extends hotType{
    title:string,
    tag:string[]
  }
  interface recommended {
     id:string,
     url:string,
     description:string
  }
  const [hotList, setHotList] = useState<hotType[]>([])
  const [articleList, setArticleList] = useState<articleList[]>([])
  const [recoList , getRecoList] = useState<recommended[]>([])
  const chartRef = useRef<HTMLDivElement>(null)

  useEffect(()=> {
    const getHotlist = async()=> {
      const res = await getHot()
      setHotList(res as unknown as hotType[])
      const res1 = await getAriticle()
      setArticleList(res1 as unknown as articleList[])
      const res2 = await getRecommend()
      getRecoList(res2 as unknown as recommended[])
    }
    getHotlist()
    const chart = chartRef.current
    if(!chart ) return
    window.addEventListener('scroll',()=>{
      if(window.scrollY > 880){
        chart.style.position = 'fixed'
        chart.style.top = '64px'
        chart.style.right = '15%'
      }else {
        chart.style.position = 'absolute'
        chart.style.top = '0px'
        chart.style.right = '0px'
      }
    })
  },[])


  return (
  <div className="home">
    <header>
      <div className="content">
        <CarouselCom></CarouselCom>
        <div className="hotlist">
          {hotList.map(item=>
            <HotList key={item.id}>{item}</HotList>
          )}
        </div>
      </div>
    </header>
    <article>
      <h3>推荐</h3>
      <div className="list">
        {recoList.map(item=>
          <Food key={item.id}>{item}</Food>
        )}
      </div>
      <div className="center">
        <div style={{width:'100%'}}>
          <Menu
          mode="horizontal"
          defaultSelectedKeys={['1']}
          items={items}
          className="center-menu"
          style={{ 
            flex: 1,
            margin:'10px 0',
            fontSize:'16px'
          }}
          onClick={(e)=>setState(e.key)}
        />
        </div>
        {state === '1' ? 
          <div style={{width:'100%', display:'flex', justifyContent:'space-between' , position:'relative'}}>
            <div className="left">
            {articleList.map(item=>
              <ArticleCard key={item.id}>{item}</ArticleCard>
            )}
            </div>
            <div className="right" ref={chartRef}>
              <div style={{width:'100%', height:'100%'}}>
                <Chart></Chart>
              </div>
            </div>
          </div>:
        <div className="classic">
          <ul>
            {classicList.map((item,index)=> {
              return <li key={index}>{item}</li>
            })}
          </ul>
        </div>  
      }
      </div>
    </article>
    <footer>
      <Footer></Footer>
    </footer>
  </div>
  )
};

export default HomePage;
